<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <script src="/jquery-2.1.4/jquery.min.js"></script>
</head>
<style>
    body { margin:0; padding:0;  }

    #backgroundImg {  position:fixed;  top:0px;  left:0px;  width:100%;  height:100%;  z-index: -1;  }

    #backgroundImg1 {  position:fixed;  top:0px;left:0px; width:100%;  height:100%;  display: none;  z-index:-1;  }

    #musicList{position:fixed;width:300px;height:100%;background-color: rgba(0,0,0,0.2);right:-300px;-webkit-transition:0.5s;top:0px}

    .arrow{position:absolute;top:300px;left:-50px;}

    #musicLyric{list-style-type:none;text-align: center;font-size: 30px;color: blue;font-family: cursive;-webkit-transition:0.5s;}

    #musicLyric li{margin-top:20px;-webkit-transition:0.5s;}

    .lrc_current{font-size: 35px;color:yellow}
    #lyricContainer{overflow:hidden;width:100%;height:750px;margin:60px auto;}

</style>
<body id="acgWindow">
<div id="backgroundImg" style="background: url('/01.jpg') center no-repeat fixed;"></div>
<div id="backgroundImg1" style="background: url('/03.jpg') center no-repeat fixed;" ></div>
<audio ontimeupdate="musicTime()" id="acgMusic" src="/music/A-RISE - Private Wars.mp3" ></audio>
<div id="musicList"><div class="arrow"><img src="/icon/arrow.png" draggable="false" width="50" height="50" style="cursor: pointer;-webkit-transition:0.5s;" /></div></div>
<div id="lyricContainer">
    <ul id="musicLyric">
    </ul>
</div>
<button style="" onclick="playMusic()">点击</button>
</body>
<script type="text/javascript">
    var backgroundImg=$("#backgroundImg1");
    var changeVal=1;
    var arrIndex=1;
    var imgArr=["/01.jpg","/03.jpg","/04.jpg","/05.jpg"];
    var musicListState=true;
    var lyric;
    var acgMusic=document.getElementById("acgMusic");
    var lyricContainer=document.getElementById("lyricContainer");
    var acgTime,lyricList;
    var tempNum=-1,lrc_now;
    function parseLyric(lrc) {
        var lyrics = lrc.split("\n");
        var lrcObj = {};
        for(var i=0;i<lyrics.length;i++){
            var lyric = decodeURIComponent(lyrics[i]);
            var timeReg = /\[\d*:\d*((\.|\:)\d*)*\]/g;
            var timeRegExpArr = lyric.match(timeReg);
            if(!timeRegExpArr)continue;
            var clause = lyric.replace(timeReg,'');

            for(var k = 0,h = timeRegExpArr.length;k < h;k++) {
                var t = timeRegExpArr[k];
                var min = Number(String(t.match(/\[\d*/i)).slice(1)),
                        sec = Number(String(t.match(/\:\d*/i)).slice(1));
                var time = min * 60 + sec;
                lrcObj[time] = clause;
            }
        }
        return lrcObj;
    }

    $.ajax({
        url:"/lrc/A-RISE - Private Wars.lrc",
        headers:{
            contentType:"application/x-www-form-urlencoded"
        },
        success:function(lrc){
            lyric = parseLyric(lrc);
            for(var i in lyric)
            {
                if(lyric[i])
                {
                    $("#musicLyric").append("<li value="+i+">"+lyric[i]+"</li>");
                }
            }
        },
        error:function(e){
            if(error)error(e);
        }
    });

    function changeBackground()
    {
        if(arrIndex>=imgArr.length){arrIndex=0}
        backgroundImg.fadeIn(2000);
        backgroundImg.css("background-image","url('"+imgArr[arrIndex]+"')");
        backgroundImg=changeVal==2?$("#backgroundImg1"):$("#backgroundImg");
        changeVal=changeVal==1?2:1;
        backgroundImg.fadeOut(2000);
        arrIndex++;
    }
    setInterval(changeBackground,10000);
    $(".arrow img").click(function()
    {
        if(musicListState)
        {
            $(this).css("transform","rotate(-180deg)");
            $("#musicList").css("right","0px");
            musicListState=false;
        }
        else
        {
            $(this).css("transform","rotate(0deg)");
            $("#musicList").css("right","-300px");
            musicListState=true;
        }
    });
    function lrc_roll()
    {
        var m=parseInt($('#musicLyric').css('margin-top'));
        if(lrc_now.offset().top>=370)
        {
            m=lrc_now.offset().top-380-m;
        }else{
            m=0;
        }
        $("#musicLyric").css("margin-top","-"+m+"px");
    }
    function musicTime()
    {
        acgTime=parseInt(acgMusic.currentTime);
        if(lyric[acgTime]&&acgTime!=tempNum)
        {
            for(var i in $("#musicLyric li"))
            {
                $("#musicLyric li").eq(i).removeClass("lrc_current");
            }
            lrc_now=$("#musicLyric li[value='"+acgTime+"']");
            lrc_now.addClass("lrc_current");
            tempNum=acgTime;
            lrc_roll();
        }
    }
    function playMusic()
    {
        acgMusic.paused==false?acgMusic.pause():acgMusic.play();
    }
    window.addEventListener("dragenter",function(e)
    {
        e.stopPropagation();
        e.preventDefault();
        return false;
    },false);
    window.addEventListener("dragover",function(e)
    {
        e.preventDefault();
    },false);
    window.addEventListener("drop",function(e)
    {
        e.stopPropagation();
        e.preventDefault();
        console.log(e.dataTransfer.files[0].name);
    },false);
</script>
</html>